<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WelCome to HuNan University JudgeOnline</title>
    <link rel="stylesheet" href="style/nav.css" >
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 自己的js文件 -->
    <script src="js/controller.js"></script>
    <script src="js/myajax.js"></script>
    <script src="js/filter.js"></script>
    <script>
        function goPage(page) {
            if (page < 1) {
                page = 1;
            }
            rankList(page);
        }
    </script>
</head>
<body>
    <div class="container">
        <!-- page head -->
        <div class="head-logo">
            <img alt="hnulogo" src="img/hnulogo.gif">
            <h2>Welcome To Hunan University Judge Online</h2>
            <img alt="acmlogo" src="img/acm.png" class="img-circle icpc" />
        </div>
        <div class="masthead">
            <ul class="nav nav-pills">
                <li id="home"><a href="index">Home</a></li>
                <li id="problem"><a href="problemset">Problem</a></li>
                <li id="contest"><a href="contest">Contest</a></li>
                <li id="status"><a href="status">Status</a></li>
                <li id="rank"><a href="rank">Rank</a></li>
                <li id="user"><a href="discuss">Discuss</a></li>
                <li id="about"><a href="fas">FAQ</a></li>
                <li class="pull-right" id="info">
                    <button type="button" class="btn btn-primary" onclick="preLogin()">Login</button>
                    <button type="button" class="btn btn-primary" onclick="preRegister()">Register</button>
                </li>
            </ul>
        </div>

        <!-- Site content-->
        <div class="row">
                <div class="col-md-12 column">
                    <nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
                        <div class="navbar-form" style="margin-left: 10vw">
                            <span style="color: white">Page: </span>
                            <input id="pageInput" type="text" class="form-control" style="width: 3em" />
                            <button id="submitPage" type="button" class="form-control" style="margin-right: 10em">Go</button>
                        </div>
                    </nav>
                    <table class="table table-hover" id="tableList">
                        <thead>
                            <tr>
                                <th>
                                    Rank
                                </th>
                                <th>
                                    User
                                </th>
                                <th>
                                    Nick
                                </th>
                                <th>
                                    School
                                </th>
                                <th>
                                    Accepts
                                </th>
                                <th>
                                    Submits
                                </th>
                                <th>
                                    AC Ratio
                                </th>
                            </tr>
                        </thead>
                    </table>
                    <ul class="pagination" id="page-top">
                        <li>
                            <a href="rank?page=1" id="start" onclick="goPage(1)">&laquo;</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="pre"> < </a>
                        </li>
                        <li>
                            <a class="disabled">...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="nowPage">1</a>
                        </li>
                        <li>
                            <a class="disabled">...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="next"> > </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="end">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
  
        <!-- Site footer -->
        <footer class="footer">
            <p>&copy; HNU ACM Team | <a href="#">Contact Us</a> | Version 2018</p>
            <p>Developer：balabala</p>
        </footer>
  
    </div>
</body>
<script>
    $("#rank").addClass("active");
    $("#submitPage").click(function() {
        var page = document.getElementById("pageInput").value;
        goPage(page);
    })
    goPage(1);
</script>
<script src="js/afterLoad.js"></script>
</html>